<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="card-header">
        <div class="header-title">创作新章节</div>
        <div class="header-actions">
          <el-button type="text" @click="goBack" class="back-btn">
            <i class="el-icon-back"></i> 返回
          </el-button>
          <el-button type="primary" @click="submitChapter" class="submit-btn">
            <i class="el-icon-check"></i> 提交
          </el-button>
        </div>
      </div>
      <el-form :model="chapterForm" :rules="rules" ref="chapterForm" label-width="100px" class="chapter-form">
        <el-form-item label="小说名称" class="form-item">
          <el-input v-model="chapterForm.title" disabled class="novel-title-input" />
        </el-form-item>
        <el-form-item label="章节序号" prop="orderNum" class="form-item">
          <el-input v-model="chapterForm.orderNum" placeholder="请输入章节序号，如：第一章" class="custom-input" />
        </el-form-item>
        <el-form-item label="章节标题" prop="chapterTitle" class="form-item">
          <el-input v-model="chapterForm.chapterTitle" placeholder="请输入章节标题" class="custom-input" />
        </el-form-item>
        <el-form-item label="订阅状态" prop="subscribe" class="form-item">
          <el-radio-group v-model="chapterForm.subscribe" class="subscribe-radio">
            <el-radio :label="0" class="radio-item">免费</el-radio>
            <el-radio :label="1" class="radio-item">订阅</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="章节内容" prop="content" class="form-item content-item">
          <el-input
            type="textarea"
            v-model="chapterForm.content"
            :rows="20"
            placeholder="请输入章节内容"
            @input="updateWordCount"
            class="content-textarea"
          />
          <div class="word-count">
            <i class="el-icon-document"></i>
            <span>当前字数：{{ chapterForm.wordCount }}</span>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { InsertNovel } from "@/api/writer/writer";

export default {
  name: "CreateChapter",
  data() {
    return {
      chapterForm: {
        title: '',
        orderNum: '',
        chapterTitle: '',
        content: '',
        subscribe: 0,
        wordCount: 0,
        createTime: ''
      },
      rules: {
        orderNum: [
          { required: true, message: '请输入章节序号', trigger: 'blur' }
        ],
        chapterTitle: [
          { required: true, message: '请输入章节标题', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入章节内容', trigger: 'blur' }
        ]
      }
    };
  },
  created() {
    this.chapterForm.title = this.$route.query.title;
  },
  methods: {
    updateWordCount() {
      // 计算字数（中文字符和英文字符都算一个字）
      this.chapterForm.wordCount = this.chapterForm.content.length;
    },
    submitChapter() {
      this.$refs.chapterForm.validate(valid => {
        if (valid) {
          // 设置创建时间
          this.chapterForm.createTime = new Date().toISOString().replace('T', ' ').substring(0, 19);
          
          InsertNovel(this.chapterForm).then(response => {
            if (response.code === 200) {
              this.$modal.msgSuccess("提交成功");
              this.goBack();
            } else {
              this.$modal.msgError(response.msg || '提交失败');
            }
          }).catch(error => {
            this.$modal.msgError('提交失败：' + error.message);
          });
        }
      });
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
}

.box-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  border: none;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #ebeef5;
}

.header-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.back-btn {
  color: #606266;
  font-size: 14px;
}

.back-btn:hover {
  color: #409EFF;
}

.submit-btn {
  padding: 8px 20px;
  font-size: 14px;
}

.chapter-form {
  padding: 20px;
}

.form-item {
  margin-bottom: 25px;
}

.novel-title-input {
  background-color: #f5f7fa;
  border: 1px solid #dcdfe6;
}

.custom-input {
  width: 100%;
}

.custom-input >>> .el-input__inner {
  border-radius: 4px;
  transition: all 0.3s;
}

.custom-input >>> .el-input__inner:focus {
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64,158,255,0.2);
}

.subscribe-radio {
  display: flex;
  gap: 20px;
}

.radio-item {
  margin-right: 0;
}

.content-item {
  position: relative;
}

.content-textarea {
  width: 100%;
}

.content-textarea >>> .el-textarea__inner {
  border-radius: 4px;
  transition: all 0.3s;
  font-size: 14px;
  line-height: 1.8;
  padding: 10px;
}

.content-textarea >>> .el-textarea__inner:focus {
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64,158,255,0.2);
}

.word-count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #909399;
  font-size: 14px;
  background-color: rgba(255,255,255,0.8);
  padding: 4px 8px;
  border-radius: 4px;
}

.word-count i {
  font-size: 16px;
}
</style> 